<template>
  <div class="sms-recharge">
    <div style="position: relative;">
      <tabs :tabs="tabLists" class="tab" :handleClick="handleClick"></tabs>
      <el-button
        type="text"
        class="admin-control-add"
        v-if=" showAdd == 'admin'"
        @click="addNew = true"
      >+ 新增管理员</el-button>
      <el-button
        type="text"
        class="admin-control-add"
        v-if="showAdd == 'commu' && admin_type == 2"
        @click="dialogFormVisible = true"
      >+ 新增小组</el-button>
    </div>
    <el-dialog title="新增管理员" :visible.sync="addNew" class="admin-control-edit">
      <el-form :model="adminForm" label-position="left" :rules="rule1" ref="ruleForm1">
        <!-- <el-form-item label="添加方式" :label-width="formLabelWidth">
          <el-radio-group v-model="radio">
            <el-radio :label="3">备选项</el-radio>
            <el-radio :label="6">备选项</el-radio>
            <el-radio :label="9">备选项</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="选择员工" :label-width="formLabelWidth">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in aList"
              :key="item.admin_id"
              :label="item.admin_name"
              :value="item.admin_id"
            ></el-option>
          </el-select>
        </el-form-item>-->
        <el-form-item label="用户名" :label-width="formLabelWidth" prop="admin_name">
          <el-input v-model.trim="adminForm.admin_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth" prop="admin_password">
          <el-input v-model.trim="adminForm.admin_password" type="password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" :label-width="formLabelWidth" prop="confirm_password">
          <el-input v-model.trim="adminForm.confirm_password" type="password" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addNew = false">取 消</el-button>
        <el-button type="primary" @click="addNewAdmin">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="新增小组" :visible.sync="dialogFormVisible" class="admin-control-edit">
      <el-form :model="form" label-position="left" :rules="rules" ref="ruleForm">
        <el-form-item label="品线名称" :label-width="formLabelWidth" prop="depart_name">
          <el-input v-model.trim="form.depart_name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addTeam">确 定</el-button>
      </div>
    </el-dialog>
    <router-view :changed="num"></router-view>
  </div>
</template>
<script>
import tabs from "@/components/tabs/tabs";
import { mapState } from 'vuex';
export default {
  name: "commu-manage",
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.adminForm.admin_password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      // aList: [],
      // radio: "",
      tabLists: [{ label: "组合管理", name: "commu" }],
      showAdd: "",
      dialogFormVisible: false,
      addNew: false,
      formLabelWidth: "80px",
      num: 1,
      adminForm: {
        depart_level: "2",
        depart_id: "",
        admin_name: "",
        admin_password: "",
        confirm_password: ""
      },
      form: {
        depart_name: "",
        parent_id: this.$store.state.user_info.first_depart_id
      },
      rules: {
        depart_name: {
          required: true,
          message: "请输入集团名称",
          trigger: "blur"
        }
      },
      rule1: {
        admin_name: {
          required: true,
          message: "请填写用户名",
          trigger: "blur"
        },
        admin_password: {
          required: true,
          message: "请填写密码",
          trigger: "blur"
        },
        confirm_password: {
          required: true,
          validator: validatePass2,
          trigger: "blur"
        }
      },
      admin_type: this.$store.state.user_info.admin_type
    };
  },
  components: {
    tabs
  },
  watch: {
    addNew(n, o) {
      if (!n) {
        this.$refs.ruleForm1.resetFields();
      }
    },
    "$route.path"() {
      this.adminForm.depart_id = this.$store.state.couple.id;
      let path = this.$route.path.split("/").pop();
      this.showAdd = path;
      if (path == "commu") {
        this.tabLists = [{ label: "组合管理", name: "commu" }];
      } else {
        this.tabLists = [
          {
            label: "组合管理",
            name: "commu"
          },
          {
            label: "组合编辑",
            name: "couple"
          },
          { label: "管理员管理", name: "admin" }
        ];
      }
    }
  },
  methods: {
    // 获取管理员列表
    // getList() {
    //   this.$http
    //     .post("/admin/depart/index.php?act=departManage&op=adminList", {
    //       depart_id: this.depart_id
    //     })
    //     .then(res => {
    //       if (res.code == "1") {
    //         console.log(res);
    //         this.aList = res.data.list;
    //       }
    //     });
    // },
    // 切换tab栏
    handleClick(tab, event) {
      if (tab.index == 0) {
        this.$router.push({
          path: "commu"
        });
      } else if (tab.index == 1) {
        this.$router.push({
          path: "couple"
        });
      } else if (tab.index == 2) {
        this.$router.push({
          path: "admin"
        });
      }
    },
    // 新增管理员
    addNewAdmin() {
      this.$refs.ruleForm1.validate(valid => {
        if (valid) {
          this.$http
            .post(
              "/admin/depart/index.php?act=departManage&op=addManage",
              this.adminForm
            )
            .then(
              res => {
                if (res.code == 1) {
                  this.$message({
                    showClose: true,
                    message: res.msg,
                    type: "success"
                  });
                  this.addNew = false;
                  this.num++;
                } else {
                  this.$message({
                    showClose: true,
                    message: res.msg,
                    type: "error"
                  });
                }
              },
              err => {
                this.$message.error("获取数据失败！");
              }
            );
        } else {
          return false;
        }
      });
    },
    // 增加小组
    addTeam() {
      this.$http
        .post("/admin/depart/index.php?act=departManage&op=addGroup", this.form)
        .then(res => {
          if (res.code == "1") {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "success"
            });
            this.num++;
            this.dialogFormVisible = false;
            this.$refs["ruleForm"].resetFields();
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error"
            });
          }
        });
    }
  },
  created() {
    // this.getList();
    this.adminForm.depart_id = this.$store.state.couple.id;
    let path = this.$route.path.split("/").pop();
    this.showAdd = path;
    if (path == "commu") {
      this.tabLists = [{ label: "组合管理", name: "commu" }];
    } else {
      this.tabLists = [
        {
          label: "组合管理",
          name: "commu"
        },
        {
          label: "组合编辑",
          name: "couple"
        },
        { label: "管理员管理", name: "admin" }
      ];
    }
  }
};
</script>
<style scoped lang="scss">
.el-input,
.el-select {
  width: 60%;
}
.admin-control-add {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
</style>
